• 什麼是 component（組件）呢？
  它就像樂高玩具裡面一個個組好的零組件。舉個例子：如果你想組一個辛巴（獅子王），當你把買回來的樂高盒子打開，就會看到大量的積木，我們照著使用說明把積木一個個組裝起來成為零組件（頭、手、腳⋯⋯），再把一個個零組件組裝起來，就有一個辛巴在你面前了。這一個個的零組件，就是 component，組裝起來的辛巴，就是一個頁面、一個功能、一個系統。
  回到 UI：我們可以把常用的設計元素做成 component（例如：button、input 等等），就可以用這些 component 組裝成一個表單，而且最重要的是，這些做好的 component 可以在不同的檔案裡複用（instance），component （main component）如果有修改，其他複用的 instance 也會同步修改，可以保持設計的一致性，非常方便。

• 如何製作 component ？（以按鈕為例）

1. 選取繪製好的按鈕，在右側面版右上方找到「…」點擊之後在下拉選單中找到「Create component」就完成了，是不是很簡單？
   
2. 完成之後，按鈕會有一個紫色外框，點選按鈕，左側面版出現由四個實心菱形組成的紫色 icon（如圖），如果有看到這兩個元素，就表示 component 建立成功。
   
3. 當然也可用快捷鍵（Mac：option + command + K）、（Windows：ctrl + Alt + K），或是按右鍵的下拉選單（Create component）也是可以建立 component 喔！

• 如何使用？

1. 從本尊（ main component）直接複製（或 option + 拖曳 main component），就可以複製出一個分身（ instance）。注意：main component 與 instance 的 icon 是不一樣的（空心菱形），你可以透過 icon 知道現在點選的是本尊（main component）還是分身（ instance）。
   
2. 如果想要改變按鈕的顏色，點選 main component 進行修改，每一個分身（ instance）也會同步修改。
   
3. 反向操作：
   當然，我們也可以對各個 instance 做修改，但不會影響 main component，如果我們對 instance 的修改很滿意，想要讓所有按鈕都同步，也可以反向操作，讓 instance 的修改結果 push 到 main component。請注意：這種反向操作要非常謹慎，一但改了main component，則所有 instance 都會同步改動，如果在其他專案有使用到同一個 main component，也會同步改動到該專案的 instance，所以非必要，不太建議這麼做。
   
4. 斷開連結：
   如果 instance 不想再受到 main component 的影響，可以 Detach instance 斷開與 main component 的連結，就會變成一般物件了。 一樣的道理，如果斷開連結，以後 main component 有任何改動，這個物件是不會隨之同步改動的，所以使用時要小心。～想清楚了再動手～
   
5. 修改 main component 名稱：
   點選 main component 元件，在左側面版找到名稱，直接修改；也可以在右側面版右上方看到 main conponent 名稱，直接修改。點擊設定 icon 可以加入描述，之後在搜尋 component 時，就可以用描述去搜尋。
   
6. component Library：
   我們可以在左側面版的 Asseets 頁籤中看到在這個專案的所有 component，只要點選 component 拖曳到畫板中，一樣可以複用（ instance ），在搜尋框輸入之前設定的描述文字，就可以快速找到你要的 component 了，要記得選 Local assets 喔！
   

• 進階功能：component properties
  以按鈕為例，如果我們想要在按鈕前面加 icon ， 用同一個按鈕 （component） 產出多個按鈕（instance），且根據不同的功能，可以對按鈕改變 icon、文字，甚至不出現 icon，那怎麼做呢？component properties 就可以解決這個問題。component properties 有三種屬性可以應用，分別是：替換屬性、布林屬性、文字屬性，它們要如何設定及應用呢？來～開始吧！

1. 先做出多個 icon component。
2. 再做出一個有icon的按鈕 component，記住，放進去按鈕的 icon 必須是分身（ instance），不是 icon 的本尊（component） 。
3. 按鈕 component 再加入 Auto layout，寬高設定 Hug contents，才能彈性縮放。
   
4. 替換屬性：
   a. 點選按鈕內的 icon，在右邊面版中看到「…」，點擊「…」會出現下拉選單。
   b. 點選 Create Instance swap property，會彈出屬性設定視窗，可以修改name，value：預設的 icon。
   
5. 布林屬性：
   a. 點選按鈕內的 icon，找到 Appearance 面版右邊的小 icon。
   b. 點選小icon，會彈出 boolean 屬性設定視窗，可以修改name，value：True=顯示 False=隱藏。
   
6. 文字屬性：
   a. 點選按鈕內的文字，找到按鈕文字右邊的小 icon。
   b. 點選小icon，會彈出 Text 屬性設定視窗，可以修改name，value=按鈕預設文字。
   
7. 應用：
   設定完成後， component與 instance 的面版出現不同的內容：

• 點選 component：會出現我們剛剛設定的三個屬性，點選右邊的 icon可以修改。
• 點選 instance ：這才是我們可以應用的地方：
• change icon：下拉選擇想要顯示的 icon
• Show icon：切換 icon 要不要顯示
• Text：直接修改按鈕文字
  

component 在 UI 設計上非常重要，它除了可以大大節省工作時間之外，也保持設計風格的一致性，在 Design System 的設計上更是不可或缺的，當然 component 還有更進階的做法，我們在開始製作 Design System 時，就可以體驗到它的強大。